<template>
  <div class="leftDiv">
    <Transition name="fate">
      <ZlLeft v-if="allStatus == '总览'" />
      <div class="leftDiv2" v-else-if="allStatus == '四全'">
        <QfgLeft v-if="twoStatus == '全覆盖'" />
        <QysLeft v-if="twoStatus == '全要素'" />
        <QthLeft v-else-if="twoStatus == '全天候'" />
      </div>
      <div class="leftDiv2" v-else-if="allStatus == '四制'">
        <FzLeft v-if="twoStatus == '法制'" />
        <JzLeft v-else-if="twoStatus == '机制'" />
        <TzLeft v-else-if="twoStatus == '体制'" />
        <ZrzLeft v-else-if="twoStatus == '责任制'" />
      </div>
      <div class="leftDiv2" v-else-if="allStatus == '四预'">
        <YbLeft v-if="twoStatus == '预报'" />
        <YjLeft v-else-if="twoStatus == '预警'" />
        <YaLeft v-else-if="twoStatus == '预案'" />
        <YyLeft v-else-if="twoStatus == '预演'" />
      </div>
    </Transition>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import ZlLeft from './zlLeft.vue'
import QfgLeft from './qfgLeft.vue'
import QysLeft from './qysLeft.vue'
import QthLeft from './qthLeft.vue'
import FzLeft from './fzLeft.vue'
import JzLeft from './jzLeft.vue'
import TzLeft from './tzLeft.vue'
import ZrzLeft from './zrzLeft.vue'
import YbLeft from './ybLeft.vue'
import YjLeft from './yjLeft.vue'
import YaLeft from './yaLeft.vue'
import YyLeft from './yyLeft.vue'
export default {
  name: 'LeftVue',
  components: {
    ZlLeft,
    QfgLeft,
    QysLeft,
    QthLeft,
    JzLeft,
    FzLeft,
    TzLeft,
    ZrzLeft,
    YbLeft,
    YjLeft,
    YaLeft,
    YyLeft
  },
  data() {
    return {}
  },
  computed: {
    ...mapState({
      allStatus: (state) => state.allStatus,
      twoStatus: (state) => state.twoStatus
    })
  },
  mounted() {},
  methods: {}
}
</script>

<style lang="scss" scoped>
.leftDiv {
  position: absolute;
  top: 8vh;
  left: 0;
  width: 25vw;
  height: 88vh;
  // border: 1px solid #fff;
  padding-left: 1.5vw;
  box-sizing: border-box;
  .leftDiv2 {
    width: 100%;
    height: 100%;
  }
}
.fate-enter-active,
.fate-leave-active {
  transition: transform 0.5s;
}

.fate-enter-from,
.fate-leave-to {
  transform: translateX(-120%);
}

.fate-enter-to,
.fate-leave-from {
  transform: translateX(0);
}
</style>
